<template>
  <div class="admin">
    <div style="  display: flex; justify-content: center;">
      <div>
        <el-input
          class="el-input_search usersSearch"
          placeholder="通过用户名搜索用户......"
          prefix-icon="el-icon-search"
          v-model="keywords"
        >
        </el-input>
        <el-button type="primary" icon="el-icon-search" @click="doSearch"
          >搜索</el-button
        >
      </div>
    </div>
    <div class="adminCard">
      <el-card v-for="(admin, index) in admins" :key="index" class="admin-card">
        <div slot="header" class="clearfix">
          <span>{{ admin.name }}</span>
          <el-button
            style="float: right; padding: 3px 0"
            type="text"
            @click="doUserDelete(admin)"
            ><i
              class="el-icon-delete"
              style="font-size: 20px;color: #E3170D"
            ></i
          ></el-button>
        </div>
        <div class="text item">
          <el-avatar class="userFace" :src="admin.userFace"></el-avatar>
        </div>
        <div class="userInfo">
          <table style="text-align: left">
            <!--            <div>用户名：{{ admin.phone }}</div>-->
            <!--            <div>手机号码：{{ admin.telephone }}</div>-->
            <!--            <div>地址：{{ admin.address }}</div>-->
            <!--            <div>用户状态：{{ admin.enabled }}</div>-->
            <tr>
              <td width="85px">用户名：</td>
              <td width="220px">{{ admin.username }}</td>
            </tr>
            <tr>
              <td>手机号码：</td>
              <td>{{ admin.telephone }}</td>
            </tr>
            <tr>
              <td>地址：</td>
              <td>{{ admin.address }}</td>
            </tr>
            <tr>
              <td>用户状态：</td>
              <td>
                <el-switch
                  v-model="admin.enabled"
                  active-text="启用"
                  inactive-text="禁用"
                  @change="doUserEnabledChanged(admin)"
                >
                </el-switch>
              </td>
            </tr>
          </table>

          <div>
            <!--操作员角色-->
            <el-tag
              v-for="(adminRoles, indexa) in admin.roles"
              :key="indexa"
              style="margin: 5px 5px 0 0"
              >{{ adminRoles.nameZh }}</el-tag
            >
            <el-popover
              placement="right-start"
              title="操作员角色列表"
              width="150"
              trigger="hover"
              @show="initCheckedRoles(admin.roles)"
            >
              <div style="margin-top: 20px">
                <el-checkbox-group v-model="checkboxGroup">
                  <el-checkbox
                    v-for="role in allAdminRoles"
                    :label="role.id"
                    :key="role.id"
                    >{{ role.nameZh }}</el-checkbox
                  >
                </el-checkbox-group>
                <div style="text-align: right; margin: 0">
                  <el-button
                    type="primary"
                    size="mini"
                    @click="doAdminRolesUpdate(admin.id)"
                    >更新</el-button
                  >
                </div>
              </div>

              <el-button
                type="text"
                slot="reference"
                style="font-size: 18px"
                class="el-icon-edit"
              ></el-button>
            </el-popover>
            <!--            <el-popover placement="top" width="600" v-model="visible">-->
            <!--              <el-button-->
            <!--                type="text"-->
            <!--                slot="reference"-->
            <!--                style="font-size: 18px"-->
            <!--                class="el-icon-edit"-->
            <!--              ></el-button>-->
            <!--            </el-popover>-->
          </div>
          <div>备注：{{ admin.remark ? admin.remark : "无" }}</div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: "SysAdmin",
  data() {
    return {
      admins: {},
      //过滤字段
      keywords: "",
      visible: false,
      checkboxGroup: [],
      allAdminRoles: {}
    };
  },
  watch: {
    //过滤数据监视
    filterUserText(val) {
      this.$refs.tree.filter(val);
    }
  },
  methods: {
    //过滤方法
    doSearch() {
      this.initAllAdmin();
    },
    //初始获取所有操作员信息
    initAllAdmin() {
      this.getRequest("/system/admin/?keywords=" + this.keywords).then(resp => {
        if (resp) {
          this.admins = resp;
        }
      });
    },
    //获取所有角色
    initAllAdminRoles() {
      this.getRequest("/system/admin/roles")
        .then(resp => {
          this.allAdminRoles = resp;
        })
        .catch(() => {});
    },
    //初始化更新角色列表
    initCheckedRoles(roles) {
      let rolesChecked = [];
      roles.forEach(item => {
        rolesChecked.push(item.id);
      });
      this.checkboxGroup = rolesChecked;
      console.log(rolesChecked);
    },
    //角色状态更新
    doUserEnabledChanged(admin) {
      this.putRequest("/system/admin/", admin)
        .then(resp => {
          if (resp) {
            this.initAllAdmin();
          }
        })
        .catch(() => {});
    },
    //删除操作员
    doUserDelete(admin) {
      this.$confirm(
        "此操作将永久删除操作员 [" + admin.name + "] ,是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "waring"
        }
      )
        .then(() => {
          this.deleteRequest("/system/admin/" + admin.id).then(resp => {
            if (resp) {
              this.initAllAdmin();
            }
          });
        })
        .catch(() => {
          this.$message.info("已取消删除！");
        });
    },
    doAdminRolesUpdate(adminId) {
      // let rolesInfo = {
      //   adminId: adminId,
      //   rids: this.checkboxGroup
      // };
      let url = "/system/admin/role?adminId=" + adminId;
      this.checkboxGroup.forEach(ids => {
        url += "&rids=" + ids;
      });
      this.putRequest(url).then(resp => {
        if (resp) {
          this.initAllAdmin();
        }
      });
    }
  },
  mounted() {
    //初始化全部菜单
    this.initAllAdmin();
    //初始化操作员角色
    this.initAllAdminRoles();
  }
};
</script>

<style>
.admin .usersSearch {
  width: 500px;
}
.adminCard {
  display: grid;
  grid-template-columns: repeat(auto-fill, 500px);
}
.adminCard .admin-card {
  margin: 20px 20px 20px 20px;
  box-shadow: 5px -5px 10px 0 rgba(95, 158, 160, 0.5);
  border: 1px solid rgba(95, 158, 160, 0.5);
}
.admin .userFace {
  width: 80px;
  height: 80px;
}
.admin .el-card__body {
  display: grid;
  grid-template-columns: 95px 325px;
}
.admin .userInfo {
  font-size: 15px;
  line-height: 28px;
}
</style>
